<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图片上传</title>
    <link href="/static/frame/weui-master/css/weui.css" rel="stylesheet" type="text/css">
    <link href="/static/frame/weui-master/css/weuix.css" rel="stylesheet" type="text/css">
    <link href="/static/css/mobile.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css" media="all">
    <script src="/static/frame/layui/layui.all.js" charset="utf-8"></script>
    <script src="/static/frame/weui-master/js/zepto.min.js" type="text/javascript"></script>
    <script src="/static/frame/weui-master/js/zepto.weui.min.js" type="text/javascript"></script>
    <script src="/static/frame/weui-master/js/swipe.js" type="text/javascript"></script>
    <script src="/static/frame/weui-master/js/lrz.min.js" type="text/javascript"></script>
</head>

<body>
<div class="weui-msg" id="s2">
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">上传题目图片</p>
        </div>
        <div class="page-bd-15" wfd-id="11">
            <div class="weui-uploader__bd">
                <form id="upload_img_form"></form>
                <ul class="weui-uploader__files" id="imgbox">
                </ul>
                </form>
                <div class="weui-uploader__input-box">
                    <input class="weui-uploader__input" accept="image/*" multiple="" type="file"
                           onchange="uploadimgs(this)">
                </div>
            </div>


            <a href="javascript:void(0);" class="weui-btn weui-btn_primary " id="uploadImage">开始上传图片</a>
        </div>
        <script>
        function removeimgs(obj) {
            $.confirm('您确定要删除吗?', '确认删除?', function () {
                $(obj).remove();
            });
            return false;
        }

        $("#uploadImage").click(function () {
            if ($("#imgbox li").length == 0) {
                $.toast("请添加需要上传的图片", "forbidden");
                return;
            }
            var body = [];
            $("#imgbox li input").each(function () {
                body.push($(this).val());
            });
            $.showLoading("正在上传");
            $.post("/img/upload.bi", {id: "${jweb.pathName('id')}", body: body}, function (rs) {
                $.hideLoading();
                $.toast("上传成功", "success");
                $("#imgbox li").remove();
            }, 'json');
        });

        function uploadimgs(obj) {
            var files = obj.files;
            var len = files.length;
            if ($("#imgbox li").length + len > 5) {
                $.toast("上传照片不能超过5张", "forbidden");
                return
            }
            for (var i = 0; i < len; i++) {
                if (/^.*\.((jpg)|(jpeg)|(png))$/i.test(files[i].name)) {
                    lrz(files[i], {width: 600, fieldName: "file"}).then(function (data) {
                        $(obj).parent().prev().append('<li onclick="removeimgs(this)" class="weui-uploader__file" style="background-image:url(' + data.base64 + ')"><input value="' + data.base64 + '"  type="hidden"  name="files" /><div class="weui-uploader__file-content"></div></li>');
                    }).then(function (data) {

                    }).catch(function (err) {
                        console.log(err);
                    });
                } else if (/^.*\.(heic)$/i.test(files[i].name)) {
                    $.toast(files[i].name + "不是图片", "forbidden");
                    return;
                } else {
                    $.toast(files[i].name + "不是图片", "forbidden");
                    return;
                }
            }
        }
        </script>
    </div>
</div>
</body>
